<!DOCTYPE html>
<html lang="en">
<div th:replace="jquery/base::base"></div>

<body>
	<h1 id="h1"></h1>
	<span th:text="${session.username}"></span>
	<span th:text="${testmap.title}"></span>
	<button id="testBtn">Test</button>

	<div style="padding:5px;">
		<input type="text" id="condition" placeholder="请输入条件" value="" />
		<input type="button" value="查询" id="doQuery">
		<input type="button" value="添加" id="doAdd">
		<input type="button" value="自动添加" id="autoAdd">
	</div>

	<div style="padding:5px">
		<table border="1" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>创建日时</th>
					<th>更新日时</th>
					<th>ip地址</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody"></tbody>

		</table>
	</div>

	<!-- 添加的对话框 -->
	<div id="addDialog" title="添加用户">
		<div>
			<label for="name">姓名</label><input type="text" id="name" /><br />
			<label for="nickname">昵称</label><input type="text" id="nickname" /><br />
			<label for="age">年龄</label><input type="text" id="age" /><br />
			<label for="money">金额</label><input type="text" id="money" /><br />
			<label for="vip">会员</label><input type="text" id="vip" /><br />
		</div>
		<div>
			<button id="addDialogCancel">取消</button><button id="addDialogSubmit">提交</button>
		</div>
	</div>

	<!-- 自动添加的对话框 -->
	<div id="autoDialog" title="自动添加用户">
		<div>
			<label for="autoNum">自动添加的数量</label><input type="text" id="autoNum" /><br />
		</div>
		<div>
			<button id="autoDialogCancel">取消</button><button id="autoDialogSubmit">提交</button>
		</div>
	</div>

	<!-- 编辑的对话框 -->
	<div id="editDialog" title="编辑">
		<div>
			<label for="editId">编号</label><input type="text" id="editId" disabled="disabled" /><br />
			<label for="editName">姓名</label><input type="text" id="editName" /><br />
			<label for="editNickname">昵称</label><input type="text" id="editNickname" /><br />
			<label for="editAge">年龄</label><input type="text" id="editAge" /><br />
			<label for="editMoney">金额</label><input type="text" id="editMoney" /><br />
			<label for="editVip">会员</label><input type="text" id="editVip" /><br />
		</div>
		<div>
			<button id="editDialogCancel">取消</button><button id="editDialogSubmit" onclick="subFunction()">提交</button>
		</div>
	</div>

	<script>
		// 页面加载完成之后的操作
		$(document).ready(function () {
			$('#h1').append("演示项目 | jQuery");
			$.ajax({
				url: "/user/search?cond=",
				method: "GET",
				success: function (result) {
					addTable(result);
				}
			})

		});

		// 为表格添加元素
		function addTable(result) {
			$("#tbody").html('');
			res = result.data;
			var str = "";
			for (var i = 0; i < res.length; i++) {
				str += "<tr><td>" + res[i].user_code + "</td><td>" + res[i].name + "</td><td>" + res[i].age + "</td><td>" + res[i].create_time + "</td><td>" + res[i].update_time + "</td><td>" + res[i].ip + "</td><td><button id=edit onclick=\"editFunction(\'" + res[i].user_code + "\')\">编辑</button><button id=delete onclick=\"deleteFunction(\'" + res[i].user_code + "\')\">删除</button></td></tr>"
			}
			$("#tbody").append(str);
		}

		// 无效函数 样板代码
		$('#testBtn').click(function () {
			$.ajax({
				url: "/user/count",
				method: "GET",
				async: true,
				success: function (result) {
					addTable(result);
				}
			});
		})

		// 搜索
		$('#doQuery').click(function () {
			var queryContent = $('#condition').val();
			$.get({
				url: "/user/search",
				data: { "cond": queryContent },
				success: function (result) {
					addTable(result);
				}
			});
		});

		// 添加、编辑和自动添加弹出框，默认关闭，点击按钮可见
		$("#addDialog").dialog({ autoOpen: false });
		$("#doAdd").click(function () {
			$("#addDialog").dialog("open");
		});
		$("#autoDialog").dialog({ autoOpen: false });
		$("#autoAdd").click(function () {
			$("#autoDialog").dialog("open");
		});
		$("#editDialog").dialog({ autoOpen: false });


		// 关闭对话框
		$("#autoDialogCancel").click(function () {
			$("#autoDialog").dialog("close");
		});
		$("#addDialogCancel").click(function () {
			$("#addDialog").dialog("close");
		});
		$("#editDialogCancel").click(function () {
			$("#editDialog").dialog("close");
		});

		//添加功能(未做参数校验) TODO:
		$("#addDialogSubmit").click(function () {
			$.ajax({
				url: "/user/add",
				method: "POST",
				contentType: "application/json",
				dataType: "json",
				data: JSON.stringify({
					"addType": "one",
					"data": {
						"name": $("#name").val(),
						"nickname": $("#nickname").val(),
						"age": $("#age").val(),
						"amount": $("#money").val(),
						"is_vip": $("#vip").val()
					}
				}),
				success: function (result) {
					alert(result.msg)
				},
				error: function () {
					alert("添加失败！~")
				},
			});
			$("#addDialog").dialog("close");
		})

		//自动添加功能(未做参数校验) TODO：
		$("#autoDialogSubmit").click(function () {
			$.ajax({
				url: "/user/autoAdd",
				method: "POST",
				contentType: "application/json",
				dataType: "json",
				data: JSON.stringify({
					"size": $("#autoNum").val()
				}),
				success: function (result) {
					alert(result.msg)
				},
				error: function () {
					alert("自动添加失败！~")
				},
			});
			$("#autoDialog").dialog("close");
		})

		// 删除
		function deleteFunction(user_code) {
			$.ajax({
				url: "/user/delete",
				method: "POST",
				contentType: "application/json",
				dataType: "json",
				data: JSON.stringify({
					"user_code": "" + user_code
				}),
				success: function (result) {
					alert("删除成功！~")
				},
				error: function () {
					alert("删除失败！~")
				},
			});
		};

		// 打开编辑
		function editFunction(userId) {
			$("#editDialog").dialog("open");
			// 显示要修改的内容
			$.ajax({
				url: "/user/profile",
				method: "GET",
				data: { "user_code": userId },
				success: function (result) {
					var res = result.data;
					$("#editMoney").val(res.amount);
					$("#editId").val(res.user_code);
					$("#editVip").val(res.is_vip);
					$("#editName").val(res.name);
					$("#editNickname").val(res.nickname);
					$("#editAge").val(res.age)
				},
				error: function () {
					alert("获取数据失败！~请尝试刷新。")
				},
			})
		};

		// 提交编辑（修改）
		function subFunction() {
			// 修改			
			$.ajax({
				url: "/user/update",
				method: "POST",
				contentType: "application/json",
				dataType: "json",
				data: JSON.stringify({
					amount: $("#editMoney").val(),
					user_code: $("#editId").val(),
					is_vip: $("#editVip").val(),
					name: $("#editName").val(),
					nickname: $("#editNickname").val(),
					age: $("#editAge").val(),
				}),
				success: function (result) {
					$("#editDialog").dialog("close");
					alert("修改成功！~")
				},
				error: function () {
					$("#editDialog").dialog("close");
					alert("修改失败！~")
				},
			});
		};

	</script>

</body>

</html>